/**背景颜色**/
.bg{
	background-color: $main;
	color: $mainInverse;
}
.gradualBg{
	background-image: $mainGradual;
	color: $mainGradualInverse ;
}
.grayBg{
	background-color: #f7f7f7;
	color: #30302f;
}
.whiteBg{
	background-color: #fff;
	color: #000;
}
.blackBg{
	background-color: #000;
	color: #fff;
}
.orangeBg{
	background-color: $orange;
	color: #fff;
}
.redBg{
	background-color: $red;
	color: #fff;
}

/* 文字颜色 */
.main{
	color: $main;
}
.green{
	color: $green;
}
.red{
	color: $red;
}
.yellow{
	color: $yellow;
}
.black{
	color: $black;
}
.white{
	color: $white;
}
.gray{
	color: $gray;
}
.grey{
	color: $grey;
}
.orange{
	color: $orange;
}

/* 宽度 */
$w:5;
@while $w <= 100 {
	.w#{$w}p{
		width: $w*1%;
	}
	.w#{$w}{
		width: $w*2upx;
	}
	$w : $w + 5 ;
}

/* 字号 */
@for $fz from 12 through 40 {
	.fz#{$fz}{
		font-size: $fz*2upx !important;
	} 
}
$fzList : 50 , 60 ,70 ,80 ,90 ,100 , 200 ;
@each $fz in $fzList {
	.fz#{$fz}{
		font-size: $fz*2upx;
	}
}


/* 边距 - 覆盖顺序是小的尺寸覆盖大的尺寸 少的方向覆盖多的方向 */
$sizeList : 200 , 100 , 90 , 80 , 70 , 60 , 50 , 40 , 35 , 30 , 25 , 20 , 15 , 10 , 5 , 4, 3 ,2,1, 0 ;

@each $s in $sizeList {
	@if $s == 15 {
		.pd#{$s},.pd{
			padding: $s*2upx!important;
		}
		.m#{$s},.m{
			margin: $s*2upx!important;
		}
	} @else {
		.pd#{$s}{
			padding: $s*2upx!important;
		}
		.m#{$s}{
			margin: $s*2upx!important;
		}
	}
}
@each $s in $sizeList {
	@if $s == 15 {
		.ptb#{$s},.ptb{
			padding-top: $s*2upx!important;
			padding-bottom: $s*2upx!important;
		}
		.plr#{$s},.plr{
			padding-left: $s*2upx!important;
			padding-right: $s*2upx!important;
		}
		.mtb#{$s},.mtb{
			margin-top: $s*2upx!important;
			margin-bottom: $s*2upx!important;
		}
		.mlr#{$s},.mlr{
			margin-left: $s*2upx!important;
			margin-right: $s*2upx!important;
		}
	} @else {
		.ptb#{$s}{
			padding-top: $s*2upx!important;
			padding-bottom: $s*2upx!important;
		}
		.plr#{$s}{
			padding-left: $s*2upx!important;
			padding-right: $s*2upx!important;
		}
		.mtb#{$s}{
			margin-top: $s*2upx!important;
			margin-bottom: $s*2upx!important;
		}
		.mlr#{$s}{
			margin-left: $s*2upx!important;
			margin-right: $s*2upx!important;
		}
	}
	
}

@each $s in $sizeList {
	@if $s == 15 {
		.pl#{$s},.pl{
			padding-left: $s*2upx!important;
		}
		.pr#{$s},.pr{
			padding-right: $s*2upx!important;
		}
		.pt#{$s},.pt{
			padding-top: $s*2upx!important;
		}
		.pb#{$s},.pb{
			padding-bottom: $s*2upx!important;
		}
		.ml#{$s},.ml{
			margin-left: $s*2upx!important;
		}
		.mr#{$s},.mr{
			margin-right: $s*2upx!important;
		}
		.mt#{$s},.mt{
			margin-top: $s*2upx!important;
		}
		.mb#{$s},.mb{
			margin-bottom: $s*2upx!important;
		}
	} @else {
		.pl#{$s}{
			padding-left: $s*2upx!important;
		}
		.pr#{$s}{
			padding-right: $s*2upx!important;
		}
		.pt#{$s}{
			padding-top: $s*2upx!important;
		}
		.pb#{$s}{
			padding-bottom: $s*2upx!important;
		}
		.ml#{$s}{
			margin-left: $s*2upx!important;
		}
		.mr#{$s}{
			margin-right: $s*2upx!important;
		}
		.mt#{$s}{
			margin-top: $s*2upx!important;
		}
		.mb#{$s}{
			margin-bottom: $s*2upx!important;
		}
	}
}

/* 位置 */
.text-center,.tc{
	text-align: center!important;
}
.text-left,.tl{
	text-align: left!important;
}
.text-right,.tr{
	text-align: right!important;
}
.text-justify,.tj{
	text-align: justify!important;
}
.text-bold,.bold{
	font-weight: bold!important;
}
.text-normal,.normal{
	font-weight: normal!important;
}

.break{
	white-space: normal;
	word-break: break-all;
}

.inline{
	display: inline-block;
}
.block{
	display: block;
	width: 100%;
}
.center-block,.cb{
	margin: 0 auto;
	display: block;
}

/* 文字溢出隐藏 */
.clip{
	width: 100%;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	@for $i from 2 through 6{
		&.c#{$i}{
			-webkit-line-clamp: $i;
		}
	}
}

.cut{
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 价格 */
.price{
	font-size: inherit;
	&:before{
		content: "￥";
		font-size: 70%;
		color: inherit;
		font-weight: normal;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
	}
	.point{
		display: inline-block;
		font-size: 70%;
		font-weight: inherit;
		letter-spacing: 1px;
		color: inherit;
	}
	&.noPrefix{
		&:before{
			content: '';
		}
	}
}

/* 布局 */
.grid,.gridNoPd,.gridSmPd,.gridNoMb{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	padding: 20upx 10upx;
	>.item,>image,>view,>navigator,>text,>button{
		width: 50%;
		padding: 0 10upx;
		margin-bottom: 20upx;
	}
	@for $i from 3 through 10{
		&.g#{$i}{
			>.item,>image,>view,>navigator,>text,>button{
				width: 100%/$i;
			}
		}
	}
}

.gridNoMb{
	>.item,>image,>view,>navigator,>text,>button{
		margin-bottom: 0;
	}
}

.gridNoPd{
	padding: 0;
	>.item,>image,>view,>navigator,>text,>button{
		padding: 0;
		margin-bottom: 0;
	}
}
.gridSmPd{
	padding: 0;
	>.item,>image,>view,>navigator,>text,>button{
		padding-right: 0;
		&:first-child{
			padding-left: 0;
			padding-right: 10upx;
		}
	}
}

/* 固定+浮动布局 */
.fix,.fixSmPd,.fixNoPd,.fixRt,.fixRtSmPd,.fixRtNoPd{
	display: block;
	width: 100%;
	position: relative;
	white-space: normal;
	word-break: break-all;
	padding-top: 20upx;
	padding-bottom: 20upx;
	.action{
		position: absolute;
		top: 20upx;
		bottom: 20upx;
		width: 160upx;
	}
	.content{
		width: 100%;
		display: block;
	}
	
	$f : 10 ; 
	@while $f <= 185 { 
		&.fix#{$f}{
			.action{
				width: $f*2upx ;
			}
		}
		$f : $f + 5 ; 
	}
}

.fix,.fixSmPd,.fixNoPd{
	padding-left: 200upx;
	padding-right: 20upx;
	.action{
		left: 20upx;
	}
	
	$f : 10 ; 
	@while $f <= 185 { 
		&.fix#{$f}{
			padding-left: $f*2upx + 40upx;
		}
		$f : $f + 5 ; 
	}
}

.fixRt,.fixRtSmPd,.fixRtNoPd{
	padding-right: 200upx;
	padding-left: 20upx;
	.action{
		right: 20upx;
	}
	$f : 10 ; 
	@while $f <= 185 { 
		&.fix#{$f}{
			padding-right: $f*2upx + 40upx;
		}
		$f : $f + 5 ; 
	}
}

.fixSmPd,.fixRtSmPd{
	padding: 0;
	.action{
		top: 0;
		bottom: 0;
	}
}

.fixSmPd{
	padding-left: 180upx;
	.action{
		left: 0;
	}
	$f : 10 ;
	@while $f <= 185 { 
		&.fix#{$f}{
			padding-left: $f*2upx + 20upx;
		}
		$f : $f + 5 ; 
	}
}
.fixRtSmPd{
	padding-right: 180upx;
	.action{
		right: 0;
	}
	$f : 10 ;
	@while $f <= 185 { 
		&.fix#{$f}{
			padding-right: $f*2upx + 20upx;
		}
		$f : $f + 5 ; 
	}
}

.fixNoPd,.fixRtNoPd{
	padding: 0;
	.action{
		top: 0;
		bottom: 0;
		width: 160upx;
	}
}

.fixNoPd{
	padding-left: 160upx;
	.action{
		left: 0;
	}
	$f : 10 ;
	@while $f <= 185 { 
		&.fix#{$f}{
			padding-left: $f*2upx;
		}
		$f : $f + 5 ; 
	}
}

.fixRtNoPd{
	padding-right: 160upx;
	.action{
		right: 0;
	}
	$f : 10 ;
	@while $f <= 185 { 
		&.fix#{$f}{
			padding-right: $f*2upx;
		}
		$f : $f + 5 ; 
	}
}


/* flex布局 */
.flex{
	display: flex;
	align-items: center;
	justify-content: space-between;
	&.top,&.t{
		align-items: flex-start;
	}
	&.bottom,&.b{
		align-items: flex-end;
	}
	&.cover,&.cv{ //垂直方向铺满
		align-items: stretch;
	}
	&.block,&.bk{ //水平方向铺满
		flex-direction: column;
	}
	&.left,&.lt{
		justify-content: flex-start;
	}
	&.center,&.ct{
		justify-content: center;
	}
	&.right,&.rt{
		justify-content: flex-end;
	}
	&.around,&.ar{
		justify-content: space-around;
	}
	&.average,&.av{
		>.item,view,button,navigator,image,text{
			flex:1;
		}
	}
}

/* 定位布局 */
.father{
	position: relative;
}
.absolute,.abs,.fixed{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	&.top{
		bottom: auto;
	}
	&.bottom{
		top: auto;
	}
	&.left{
		right: auto;
	}
	&.right{
		left: auto;
	}
}
@for $i from 0 through 10 {
	.z#{$i}{
		z-index: $i !important;
	}
}
.fixed{
	position: fixed;
}

/* fix-auto布局 */
.fixAuto,.fixAutoNoPd,.fixAutoSmPd{
	display: table;
	width: 100%;
	padding: 20upx 10upx;
	>.item,>view,>image,>navigator,>text{
		vertical-align: top;
		padding: 0 10upx;
		display: table-cell ;
		$f : 10 ;
		@while $f <= 200 { 
			&.w#{$f}{
				width: $f*2upx;
			}
			$f : $f + 5 ; 
		}
	}
	&.middle{
		>.item,>view,>image,>navigator,>text{
			vertical-align: middle;
		}
	}
	&.bottom{
		>.item,>view,>image,>navigator,>text{
			vertical-align: bottom;
		}
	}
}
.fixAutoSmPd{
	padding: 0;
	>.item,>view,>image,>navigator,>text{
		padding-right: 0;
		&:first-child{
			padding-left: 0;
			padding-right: 10upx;
		}
	}
}
.fixAutoNoPd{
	padding: 0;
	>.item,>view,>image,>navigator,>text{
		padding: 0;
	}
}


/* 浮动组件 */
.clear{
	&:after{
		content: "";
		clear: both;
		height: 0;
		display: block;
		visibility: hidden;
	}
}
.fl{
	float: left;
}
.fr{
	float: right;
}

/* 边线(实线、虚线) */
.border-none,.bdn{
	border: none!important;
}
.border,.bd{
	border: 1px solid $borderColor!important;
	&.dashed{
		border-style: dashed!important;
	}
}
.border-top,.bt{
	border-top:1px solid $borderColor!important;
	&.dashed{
		border-top-style: dashed!important;
	}
}
.border-bottom,.bb{
	border-bottom:1px solid $borderColor!important;
	&.dashed{
		border-bottom-style: dashed!important;
	}
}
.border-left,.bl{
	border-left:1px solid $borderColor!important;
	&.dashed{
		border-left-style: dashed!important;
	}
}
.border-right,.br{
	border-right: 1px solid $borderColor!important;
	&.dashed{
		border-right-style: dashed!important;
	}
}

$b:2;
@while $b <= 10 {
	.border#{$b},.bd#{$b}{
		border: #{$b}px solid $borderColor!important;
		&.dashed{
			border-style: dashed!important;
		}
	}
	.border-top#{$b},.bt#{$b}{
		border-top:#{$b}px solid $borderColor!important;
		&.dashed{
			border-top-style: dashed!important;
		}
	}
	.border-bottom#{$b},.bb#{$b}{
		border-bottom:#{$b}px solid $borderColor!important;
		&.dashed{
			border-bottom-style: dashed!important;
		}
	}
	.border-left#{$b},.bl#{$b}{
		border-left:#{$b}px solid $borderColor!important;
		&.dashed{
			border-left-style: dashed!important;
		}
	}
	.border-right#{$b},.br#{$b}{
		border-right: #{$b}px solid $borderColor!important;
		&.dashed{
			border-right-style: dashed!important;
		}
	}
	$b : $b + 1 ;
}

/* 圆角 */
.radius,.rds{
	-webkit-border-radius: 8upx!important;
	-moz-border-radius: 8upx!important;
	border-radius: 8upx!important;
}
.circle,.rds100{
	-webkit-border-radius: 100%!important;
	-moz-border-radius: 100%!important;
	border-radius: 100%!important;
}
$r:0;
@while $r <= 32{
	.rds#{$r},&.radius#{$r}{
		-webkit-border-radius:$r*2upx!important;
		-moz-border-radius:$r*2upx!important;
		border-radius:$r*2upx!important;
	}
	$r : $r + 1;
}

.rdsTl,.radiusTopLeft{
	border-top-left-radius:8upx!important;
}
.rdsTr,.radiusTopRight{
	border-top-right-radius: 8upx!important;
}
.rdsBl,.radiusBottomLeft{
	border-bottom-left-radius: 8upx!important;
}
.rdsBr,.radiusBottomRight{
	border-bottom-right-radius: 8upx!important;
}

$r:0;
@while $r <= 32{
	.rdsTl#{$r},.radiusTopLeft#{$r}{
		border-top-left-radius: $r*2upx!important;
	}
	.rdsTr#{$r},.radiusTopRight#{$r}{
		border-top-right-radius: $r*2upx!important;
	}
	.rdsBl#{$r},.radiusBottomLeft#{$r}{
		border-bottom-left-radius: $r*2upx!important;
	}
	.rdsBr#{$r},.radiusBottomRight#{$r}{
		border-bottom-right-radius: $r*2upx!important;
	}
	$r : $r + 1;
}

/* 正方形&长方形 */
.square,.oblong,.ho{
	width: 100%;
	position: relative;
	height: auto;
	>.item,>image,>view,>navigator,>text,>button{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
.square{
	padding-top: 100%;
}
.oblong{
	padding-top: 125%;
}
.ho{
	padding-top: 60%;
}

/* 遮罩层 */
.wrapper,.wp{
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
}
.wrapper-top,.wt{
	background-image: linear-gradient(rgba(0,0,0,0.3) , rgba(0,0,0,0.02));
}
.wrapper-bottom,.wb{
	background-image: linear-gradient( rgba(0,0,0,0.02) , rgba(0,0,0,0.3) );
}

/* 阴影 */
.shadow{
	box-shadow: 0px 2px 9px -1px rgba(0, 0, 0, 0.1);
}

/* 透明度 */
@for $op from 0 through 10 {
	.op#{$op}{
		opacity: $op * 0.1;
	}
}

/* 分割线 */
.split{
	>.item,>image,>view,>navigator,>text,>button{
		position: relative;
		&:before{
			content:"";
			display: block;
			position: absolute;
			height: 20upx;
			left: 0;
			top: 50%;
			margin-top: -10upx;
			border-left: 1px solid $borderColor;
		}
	}
}

.hover{
	&:hover{
		opacity: 0.9;
	}
}